<template>
  <div class="home">
    <!--  -->
    <el-container>
      <!--  -->
      <el-header height="80px">
        <el-row>
          <!-- 左 -->
          <el-col :span="12">
            <div class="el-header-left">ERP管理系统</div>
          </el-col>
          <!-- 右 -->
          <el-col :span="12">
            <div class="el-header-right">
              <el-avatar :size="40" :src="circleUrl"></el-avatar>
              <span>ID:高圆圆</span>
              <el-dropdown>
                <i class="el-icon-setting"></i>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item
                    ><i class="el-icon-switch-button"></i
                    >退出登录</el-dropdown-item
                  >
                </el-dropdown-menu>
              </el-dropdown>
            </div></el-col
          >
        </el-row>
      </el-header>
      <!-- 主页内容 -->
      <el-container>
        <!-- 左边 -->
        <el-aside width="220px">
          <el-menu
            default-active="1"
            class="el-menu-vertical-demo"
            :router="true"
          >
            <el-submenu index="2">
              <template slot="title">
                <i class="el-icon-s-cooperation"></i>
                <span>基础信息</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/home/SystemPage">系统首页</el-menu-item>
                <el-menu-item index="/home/Personal Information"
                  >个人信息</el-menu-item
                >
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="3">
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span>商品管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/home/ShopList">商品列表</el-menu-item>
                <el-menu-item index="/home/AddShop">添加商品</el-menu-item>
                <el-menu-item index="/home/EditShop">商品分类编辑</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="4">
              <template slot="title">
                <i class="el-icon-s-open"></i>
                <span>数据报表</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/home/Order Report">订单报表</el-menu-item>
                <el-menu-item index="/home/ShopSale">销售报表</el-menu-item>
                <el-menu-item index="/home/Money">财务报表</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="5">
              <template slot="title">
                <i class="el-icon-s-custom"></i>
                <span>采购管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/home/Supplier Management">供应商管理</el-menu-item>
                <el-menu-item index="/home/Purchase management">请购单管理</el-menu-item>
                <el-menu-item index="/home/Requisition management">采购单管理</el-menu-item>
                <el-menu-item index="/home/Return order management">退货单管理</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="6">
              <template slot="title">
                <i class="el-icon-coin"></i>
                <span>仓库管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/home/Warehouse management">入库管理</el-menu-item>
                <el-menu-item index="/home/Pull Warehouse">出库管理</el-menu-item>
                <el-menu-item index="/home/Warehousing">仓储管理</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="7">
              <template slot="title">
                <i class="el-icon-reading"></i>
                <span>权限管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/home/Staff">员工管理</el-menu-item>
                <el-menu-item index="/home/Company structure">公司架构</el-menu-item>
                <el-menu-item index="/home/To allocate">权限分配</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>
        <!-- 内容 -->
        <el-main>
          <div class="content-box">
            <router-view></router-view>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Index from "@/components/Index.vue"

export default {
  name: "Index",
  components: {
    Index,
  },
  data: function () {
    return {};
  },
};
</script>


<style lang="less" scoped>
.home {
  .el-container {
    height: 100vh;
  }
  .el-header {
    background-color: #23262e;
    color: #fff;
    line-height: 80px;
    font-size: 20px;

    .el-header-left {
      text-align: left;
      padding-left: 5px;
      color: #fff;
    }
    .el-header-right {
      text-align: right;
      padding-right: 20px;
    }
    .el-icon-setting {
      font-size: 20px;
      margin-left: 15px;
      color: #fff;
    }
    .el-avatar {
      vertical-align: middle;
      line-height: 70px;
      margin-right: 10px;
    }
  }
  // 左边
  .el-aside {
    background-color: #393d49;
    color: #333;
    .el-menu {
      border: none;

      .el-menu-item {
        padding-left: 20px;
      }
      // .el-submenu {
      //  // padding-left: 20px;
      // }
    }
  }
  // 内容
  .el-main {
    background-color: #f1f1f2;
    color: #333;
    .content-box {
      background-color: #fff;
      border-radius: 10px;
      height: 100%;
    }
  }
}
</style>